<!doctype html>
<html lang="zn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title id="labelTitle">国能铁路装备有限责任公司</title>
  </head>
  <style>
    #home-loading {
			width: 100%;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: -1;
      background-color: #689fff;
    }
    #home-loading img {
      position: absolute;
    }
    .loading-image {
      position: relative;
      width: 250px;
      height: 250px;
    }
    .circle-small {
      position: absolute;
      top: 50px;
      left: 50px;
      width: 150px;
      height: 150px;
      animation: rotate linear 0.6s infinite;
    }
    .circle-medium {
      position: absolute;
      top: 25px;
      left: 25px;
      width: 200px;
      height: 200px;
      animation: rotate linear 1.2s infinite;
    }
    .circle-large {
      position: absolute;
      top: 0;
      left: 0;
      width: 250px;
      height: 250px;
      animation: rotate linear 1.8s infinite;
    }
    .loading-label {
      margin-top: 24px;
      font-size: 24px;
      color: #fff;
    }
    @keyframes rotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <body>
    <div id="home-loading">
      <div class="loading-image">
        <svg
          class="circle-small"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="150"
          height="150"
        >
          <path d="M 5 70 A 70 70 0 0 1 70 5" stroke="#fff" stroke-width="5" fill="none" />
        </svg>

        <svg
          class="circle-medium"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="200"
          height="200"
        >
          <path d="M 5 95 A 95 95 0 0 1 95 5" stroke="#fff" stroke-width="5" fill="none" />
        </svg>
        <svg
          class="circle-large"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          width="250"
          height="250"
        >
          <path d="M 5 120 A 120 120 0 0 1 120 5" stroke="#fff" stroke-width="5" fill="none" />
        </svg>
      </div>
      <div class="loading-label">系统加载中</div>
    </div>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
